<template>
  <!-- 五防钥匙箱 二级页面-->
  <div class="key-box">
    <div class="key-box-title betweenbox">
      <div class="title centerbox">{{titleName}}</div>
      <div class="btn betweenbox">
        <el-button type="primary" icon="iconfont iconsousuo" @click="jumpDetailsPage('查询')">查询</el-button>
        <el-button type="primary" icon="iconfont icontongji" @click="jumpDetailsPage('统计')">统计</el-button>
        <el-button type="primary" icon="iconfont iconfanhui" @click="goBack">返回</el-button>
      </div>
    </div>
    <div class="key-box-top borderStyle">
      <div
        class="intelligentKeyBox"
        v-for="(item,index) in keyboxData"
        :key="index"
        :class="{redbox:item.value=='1'}"
      >
        <div class="name centerbox">{{item.name}}</div>
        <div class="stutas">箱门状态</div>
        <div class="switch">
          <div v-show="item.value=='1'" class="switch-com switch-no centerbox">ON</div>
          <div v-show="(item.value=='0') || (!item.value)" class="switch-com switch-yes centerbox">OFF</div>
        </div>
      </div>
    </div>
    <div class="key-box-bottom borderStyle nocenterbox">
      <div class="nocenterbox">
        <div v-for="(item,index) of newList" :key="index">
          <div class="key-frame key-con-leave" v-show="(item.value=='0') || (!item.value)">
            <div class="name" :title="item.name">{{item.name}}</div>
            <div class="stutas">归还</div>
          </div>
          <div class="key-frame key-con" v-show="item.value=='1'">
            <div class="name">{{item.name}}</div>
            <div class="stutas">取出</div>
          </div>
        </div>
      </div>
      <div class="elPaginationStyle centerbox">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="8"
          layout="total,prev, pager, next, jumper"
          :total="pageTotal"
        ></el-pagination>
      </div>
    </div>
  </div>
</template> 

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { LocksAPIModule } from "@/store/modules/locks";
import { GetSocketModule } from "@/store/modules/GetSocketData";
import _ from "lodash";
@Component
export default class extends Vue {
  value: boolean = true;
  switchFlag: boolean = true;
  currentPage=1
  get titleName() {
    return LocksAPIModule.oneStationList.name;
  }
  // 五防钥匙箱
  get getDeviceInfo() {
    var keyboxInfo = LocksAPIModule.getxtInfo["08"] || []; //没数据
    var dwobj = {
      "080102": [], //钥匙箱状态   柜门  和 钥匙数据
      "080150": [], //钥匙箱钥匙授权
      // "080152": [], //钥匙箱钥匙授权
    };
    let objKeys = Object.keys(dwobj);
    keyboxInfo.map((k) => {
      dwobj[k.dwValue] = dwobj[k.dwValue] || [];
      dwobj[k.dwValue].push(k);
    });
    console.log(dwobj);
    return dwobj;
  }
  // //钥匙箱数据
  // 钥匙数据
  get keyList() {
    // 没数据
    let data = this.getDeviceInfo["080102"] || [];
    var list=[]
    data.map(v=>{
     var i= v.name.indexOf('柜门面板')
     var i2=v.name.indexOf('钥匙箱柜门')
    // console.log(i);
    if (i == -1 && i2 ==-1) {
    //  v.Myindex=v.name.substring(v.name.length - 3,v.name.length - 1)
      list.push(v)
    }
    })
    list=list.sort((a,b)=>(a.orderNum - b.orderNum))
    // console.log(list);
    // data=data.filter(v=>{
    //   let regexp=/柜门$/
    //   let test=regexp.test(v.name)
    //   return !test
    // })
    // let data = [
    //   {
    //     name: "一号钥匙箱",
    //     status: 1, //开
    //   },
    //   {
    //     name: "二号钥匙箱",
    //     status: 0, //关
    //   },
    // ];
    // console.log("102", list);

    // if (data.length > 4) {
    //   data = data.slice(0, 4);
    // }

    return list;
  }
// //钥匙数据
// 钥匙箱数据
  get keyboxData() {
    // 没数据
    // let data = this.getDeviceInfo['080152'] || []
    let data = this.getDeviceInfo["080102"] || [];
    
    data=data.filter(v=>{
      let regexp=/钥匙箱柜门$/
      let test=regexp.test(v.name)
      return test
    })
    // console.log(data);
    
    // let data = [
    //   {
    //     name: "一号钥匙",
    //     status: 1, //开
    //   },
    //   {
    //     name: "二号钥匙",
    //     status: 0, //关
    //   },
    //   {
    //     name: "三号钥匙",
    //     status: 1,
    //   },
    //   {
    //     name: "四号钥匙",
    //     status: 0,
    //   },
    // ];
    // console.log("150", data);
    return data;
  }
  // 钥匙数据
  // get keyList() {
  //   // 没数据
  //   // let data = this.getDeviceInfo['080152'] || []
  //   let data = this.getDeviceInfo["080150"] || [];
  //   // let data = [
  //   //   {
  //   //     name: "一号钥匙",
  //   //     status: 1, //开
  //   //   },
  //   //   {
  //   //     name: "二号钥匙",
  //   //     status: 0, //关
  //   //   },
  //   //   {
  //   //     name: "三号钥匙",
  //   //     status: 1,
  //   //   },
  //   //   {
  //   //     name: "四号钥匙",
  //   //     status: 0,
  //   //   },
  //   // ];
  //   // console.log("150", data);
  //   return data;
  // }
  get pageTotal(){
    let keyList=this.keyList
    let length=keyList.length
    return length
  }

get newList(){
  let pageSize=  (this.currentPage-1)*8
   let newList = this.keyList.slice(pageSize,pageSize+8)
   return newList
}
  // 分页事件
  handleCurrentChange(val: any) {
 this.currentPage=val

  }
  //   按钮开关 仅供测试，页面上不能操作，只显示状态
  switchFlagBtn() {
    // this.switchFlag = !this.switchFlag;
  }
  //   返回
  public goBack(val: string) {
    this.$router.push("index");
  }
  // 统计的详情页面
  jumpDetailsPage(name: string) {
    this.$router.push({
      path: "KeyBoxPage/infoDetailsPage",
      query: {
        name: name,
      },
    });
  }
}
</script>

<style lang="scss" scoped>
.key-box {
  width: calc(100% - 0.2rem);
  height: 100%;
  margin-left: 0.2rem;
  .nocenterbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  &-title {
    width: 100%;
    height: 0.4rem;
    color: #76eefa;
    font-size: 0.2rem;
    .title {
      width: 80%;
      font-size: 0.2rem;
      height: 100%;
    }
    .btn {
      width: 20%;
      height: 100%;
      .top-back {
        width: 0.9rem;
        height: 0.3rem;
        background: url("../../../../assets/img/return.png") no-repeat center
          center;
        background-size: 100% 100%;
        cursor: pointer;
        margin-left: 0.15rem;
      }
    }
  }
  // 图片要改
  &-top {
    width: 15.5rem;
    height: 2.8rem;
    overflow-x: auto;
    display: inline-flex;
    align-items: center;
    padding: 0 0.3rem 0 0.3rem;
    box-sizing: border-box;
    .intelligentKeyBox {
      width: 4.17rem;
      height: 2.48rem;
      background: url("../../../../assets/img/Locks/keybox_blue.png") no-repeat;
      background-size: 100% 100%;
      font-size: 0.24rem;
      position: relative;
      margin: auto;
      flex: none;
      .name {
        width: 82%;
        height: 0.5rem;
        position: absolute;
        top: 0.3rem;
        // left: 1.2rem;
      }
      .stutas {
        position: absolute;
        top: 1.4rem;
        left: 2rem;
      }
      .switch {
        width: 89px;
        height: 34px;
        background: rgba(3, 37, 65, 1);
        border: 0px solid rgba(112, 112, 112, 1);
        border-radius: 0.2rem;
        position: absolute;
        top: 1.8rem;
        left: 1.9rem;
        cursor: pointer;
        display: flex;
        .switch-com {
          width: 0.43rem;
          height: 0.3rem;
        }
        .switch-no {
          border: 1px solid #fe9999;
          background: #fe9999;
          border-top-right-radius: 0.2rem;
          border-bottom-right-radius: 0.2rem;
          position: absolute;
          top: 0.02rem;
          left: 0.43rem;
        }
        .switch-yes {
          border: 1px solid rgba(13, 175, 248, 1);
          background: linear-gradient(
            360deg,
            rgba(20, 123, 252, 1) 0%,
            rgba(12, 157, 254, 1) 40%,
            rgba(3, 191, 255, 1) 100%
          );
          border-top-left-radius: 0.2rem;
          border-bottom-left-radius: 0.2rem;
          position: absolute;
          top: 0.02rem;
          left: 0.02rem;
        }
      }
    }
    .redbox {
      background: url("../../../../assets/img/Locks/keybox_red.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  &-bottom {
    width: 100%;
    height: calc(100% - 3.46rem);
    margin-top: 0.26rem;
    > :nth-child(1) {
      width: 100%;
      height: 90%;
    }
    > :nth-child(2) {
      width: 94%;
      height: 10%;
    }
    .key-frame {
      width: 3.6rem;
      height: 2rem;
      position: relative;
      .name {
        position: absolute;
        top: 0.45rem;
        left: 0.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 2.3rem;
      }
      .stutas {
        position: absolute;
        top: 1.35rem;
        left: 1.8rem;
      }
    }
    .key-con {
      background: url("../../../../assets/img/Locks/key_red.png") no-repeat;
      background-size: 100% 100%;
    }
    .key-con-leave {
      background: url("../../../../assets/img/Locks/key_blue.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
<style lang="scss">
.key-box {
  .el-button--primary {
    height: 0.3rem;
  }
}
</style>